/* ============================================== */
/* CSS for control sap.m/WizardProgressNavigator  */
/* BlueCrystal theme                              */
/* ============================================== */

.sapMWizardProgressNav {
	background: @sapUiGroupContentBackground;
	border-color: @sapUiGroupContentBorderColor;
}

.sapMWizardProgressNavStep:hover .sapMWizardProgressNavAnchorCircle {
	background: @sapUiButtonHoverBackground;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"]:hover .sapMWizardProgressNavAnchorCircle {
	background: @sapUiHighlight;
}

.sapMWizardProgressNavAnchor:focus {
	outline: 1px dotted @sapUiContentFocusColor;
	outline-offset: 1px;
}

.sapMWizardProgressNavAnchorCircle {
	color: @sapUiButtonTextColor;
	background: @sapUiSegmentedButtonBackground;
	border-color: @sapUiSegmentedButtonSelectedBackground;
}

.sapMWizardProgressNavAnchorTitle {
	background: @sapUiGroupContentBackground;
}

.sapMWizardProgressNavAnchorTitle:hover {
	color: darken(@sapUiGroupTitleTextColor, 10);
}

.sapMWizardProgressNavStep::after {
	border-bottom-color: @sapUiHighlight;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {

	/* anchors in all steps after the active one have inactive style */
	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavAnchorCircle {
		color: @sapUiSegmentedButtonIconColor;
		background: @sapUiButtonBackground;
		border-color: @sapUiSegmentedButtonBorderColor;
	}

	/* all separators after (and including) the active step have inactive style */
	&::after,
	& ~ .sapMWizardProgressNavStep::after {
		border-bottom-color: @sapUiSegmentedButtonBorderColor;
	}
}